import TagView from '@/components/TagView';
import { Link } from '@@/exports';
import {
  DeleteOutlined,
  EditOutlined,
  QuestionCircleOutlined, ScissorOutlined,
  SearchOutlined,
  ShareAltOutlined,
} from '@ant-design/icons';
import '@umijs/max';
import { Card, Flex, Image, Popconfirm, Tag } from 'antd';
import React from 'react';

interface Props {
  data: API.PictureVO;
  canSearch?: boolean;
  canShare?: boolean;
  canEdit?: boolean;
  canDelete?: boolean;
  canScissor?:boolean
  onSearch?: () => void;
  onShare?: () => void;
  onEdit?: () => void;
  onDelete?: () => void;
  onScissor?:()=>void
}

const PictureCard: React.FC<Props> = (props) => {
  const { data, canSearch, canShare, canEdit, canDelete,canScissor, onSearch, onShare, onEdit, onDelete,onScissor } =
    props;
  const actions = [
    canSearch && <SearchOutlined key="search" onClick={onSearch} />,
    canShare && <ShareAltOutlined key="link" onClick={onShare} />,
    canEdit && <EditOutlined key="edit" onClick={onEdit} />,
    canScissor && <ScissorOutlined key="scissor" onClick={onScissor}/>,
    canDelete && (
      <Popconfirm
        key="delete"
        title="删除此图"
        icon={<QuestionCircleOutlined style={{ color: 'red' }} />}
        description="是否删除这张图片?"
        onConfirm={onDelete}
        onCancel={() => {}}
        okText="是"
        cancelText="否"
      >
        <DeleteOutlined key="delete" />
      </Popconfirm>
    ),
  ].filter(Boolean);

  return (
    <div>
      <Card
        style={{
          marginTop: '10px',
        }}
        cover={
          <Image
            preview={true}
            src={data.thumbnailUrl ?? data.url}
            alt={data.name}
            style={{ width: '100%', height: '20vh', objectFit: 'cover' }}
          />
        }
        actions={actions}
      >
        <Link to={`/picture/detail/${data.id}`}>
          <Card.Meta title={data.name} />
          <div style={{ marginTop: 16, height: '1vh' }}>
            <Flex flex="column" justify="flex-start">
              <Flex>{data.category && <Tag color="green">{data.category}</Tag>}</Flex>
              <Flex style={{ overflow: 'hidden' }}>
                <TagView tags={data?.tags ?? []} />
              </Flex>
            </Flex>
          </div>
        </Link>
        <div
          style={{
            marginTop: 'auto',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'flex-end',
          }}
        ></div>
      </Card>
    </div>
  );
};

export default PictureCard;
